/* 现代化主题色彩系统 - 为年轻用户设计 */

/* CSS变量定义 - 支持主题切换 */
:root {
  /* 主渐变色彩 */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  
  /* Glassmorphism 背景 */
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-backdrop: blur(20px);
  
  /* 功能色渐变 */
  --gradient-success: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
  --gradient-warning: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  --gradient-error: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  --gradient-info: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  
  /* 文本颜色 */
  --text-primary: #2d3748;
  --text-secondary: #4a5568;
  --text-accent: #667eea;
  --text-muted: #718096;
  
  /* 背景色 */
  --bg-primary: #ffffff;
  --bg-secondary: #f7fafc;
  --bg-accent: rgba(102, 126, 234, 0.1);
  
  /* 阴影系统 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  
  /* 边框半径 */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
}

/* 暗黑主题 */
[data-theme="dark"] {
  /* 主渐变色彩 - 暗黑版本 */
  --gradient-primary: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);
  --gradient-secondary: linear-gradient(135deg, #b83280 0%, #c53030 100%);
  --gradient-hero: linear-gradient(135deg, #2d3748 0%, #4a5568 50%, #553c9a 100%);
  
  /* Glassmorphism 背景 - 暗黑版本 */
  --glass-bg: rgba(45, 55, 72, 0.8);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-backdrop: blur(25px);
  
  /* 文本颜色 - 暗黑版本 */
  --text-primary: #f7fafc;
  --text-secondary: #e2e8f0;
  --text-accent: #90cdf4;
  --text-muted: #a0aec0;
  
  /* 背景色 - 暗黑版本 */
  --bg-primary: #1a202c;
  --bg-secondary: #2d3748;
  --bg-accent: rgba(144, 205, 244, 0.1);
  
  /* 阴影系统 - 暗黑版本 */
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

/* 预设主题色彩 */
[data-theme="classic-blue"] {
  --gradient-primary: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
  --gradient-secondary: linear-gradient(135deg, #63b3ed 0%, #3182ce 100%);
}

[data-theme="vibrant-orange"] {
  --gradient-primary: linear-gradient(135deg, #ed8936 0%, #c05621 100%);
  --gradient-secondary: linear-gradient(135deg, #fed7aa 0%, #ed8936 100%);
}

[data-theme="warm-pink"] {
  --gradient-primary: linear-gradient(135deg, #ed64a6 0%, #c53030 100%);
  --gradient-secondary: linear-gradient(135deg, #fbb6ce 0%, #ed64a6 100%);
}

[data-theme="deep-purple"] {
  --gradient-primary: linear-gradient(135deg, #805ad5 0%, #553c9a 100%);
  --gradient-secondary: linear-gradient(135deg, #b794f6 0%, #805ad5 100%);
}

[data-theme="nature-green"] {
  --gradient-primary: linear-gradient(135deg, #48bb78 0%, #2f855a 100%);
  --gradient-secondary: linear-gradient(135deg, #9ae6b4 0%, #48bb78 100%);
}

/* 动画过渡 */
* {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 基础工具类 */
.gradient-primary {
  background: var(--gradient-primary);
}

.gradient-secondary {
  background: var(--gradient-secondary);
}

.gradient-hero {
  background: var(--gradient-hero);
}

.glass-morphism {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}

.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 3D效果工具类 */
.effect-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-xl);
}

/* 脉冲动画 */
@keyframes pulse-gentle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.animate-pulse-gentle {
  animation: pulse-gentle 2s infinite;
}

/* 渐入动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 数字计数动画 */
@keyframes countUp {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

.animate-countUp {
  animation: countUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 悬浮光晕效果 */
.glow-effect {
  position: relative;
  overflow: hidden;
}

.glow-effect::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--gradient-primary);
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.glow-effect:hover::before {
  opacity: 0.7;
}

/* 响应式断点工具 */
@media (max-width: 640px) {
  :root {
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
  }
}
